<template>
  <Page class="visit-form">
    <div class="question">
      <div class="question-title">
        <img
          class="visit-top-title1"
          src="~img/questionnaire/bac-title.png"
          alt=""
        />
        <div class="visit-top-title2">
          参与问卷小调查，为您提供更优质的服务!
        </div>
      </div>
      <!-- 基本信息 -->
      <div class="qs-company">
        <div class="oneline_left">
          <p>{{ shortName }}</p>
        </div>
        <div>
          <div class="title-com">{{ corpName }}</div>
          <div class="title-cre">统一信用代码：{{ corpCredit }}</div>
        </div>
      </div>
      <!-- 问卷内容 -->
      <div class="question-item">
        <div class="question-item-title">
          <span class="question-index">01.</span
          ><span class="question-tip">【填写】</span>企业联系人姓名:
        </div>
        <input
          v-model="answers1.q1"
          placeholder="请输入姓名"
          :disabled="inputDisabled"
        />
      </div>
      <div class="question-item">
        <div class="question-item-title">
          <span class="question-index">02.</span
          ><span class="question-tip">【填写】</span>企业联系人手机号:
        </div>
        <input
          v-model="answers2.q2"
          placeholder="请输入手机号"
          inputmode="numeric"
          :disabled="inputDisabled"
          pattern="[0-9]*"
        />
      </div>
      <div class="question-item">
        <div class="question-item-title">
          <span>03.</span
          ><span class="question-tip">【填写】</span>企业实际经营地址:
        </div>
        <input
          v-model="answers3.q3"
          placeholder="请输入实际经营地址"
          :disabled="inputDisabled"
        />
      </div>
      <div class="question-item">
        <div class="question-item-title">
          <span class="question-index">04.</span
          ><span class="question-tip">【单选】</span>企业目前有无贷款需求:
        </div>
        <van-radio-group v-model="answers4.q4">
          <div class="question-ans">
            <van-radio icon-size="16px" name="A" :disabled="inputDisabled"
              >A、50万以下</van-radio
            >
          </div>
          <div class="question-ans">
            <van-radio icon-size="16px" name="B" :disabled="inputDisabled"
              >B、50-100万</van-radio
            >
          </div>
          <div class="question-ans">
            <van-radio icon-size="16px" name="C" :disabled="inputDisabled"
              >C、100-200万</van-radio
            >
          </div>
          <div class="question-ans">
            <van-radio icon-size="16px" name="D" :disabled="inputDisabled"
              >D、200-500万</van-radio
            >
          </div>
          <div class="question-ans">
            <van-radio icon-size="16px" name="E" :disabled="inputDisabled"
              >E、500万以上</van-radio
            >
          </div>
          <div class="question-ans">
            <van-radio icon-size="16px" name="F" :disabled="inputDisabled"
              >F、无贷款需求</van-radio
            >
          </div>
        </van-radio-group>
      </div>
      <div class="question-item" v-if="answers4.q4 !== 'F'">
        <div class="question-item-title">
          <span class="question-index">05.</span
          ><span class="question-tip">【多选】</span
          >如果企业出现资金紧张的主要原因是:
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers5.q5_a"
            :disabled="inputDisabled"
          >
            A、生产投资规模扩张过快，流动资金配套跟不上需求
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers5.q5_b"
            :disabled="inputDisabled"
          >
            B、原材料涨价过快，自身产品难以随之上调价格，利润空间受到挤压
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers5.q5_c"
            :disabled="inputDisabled"
          >
            C、人民币升值压力加大
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers5.q5_d"
            :disabled="inputDisabled"
          >
            D、出口退税率降低
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers5.q5_e"
            :disabled="inputDisabled"
          >
            E、劳动力成本上升
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers5.q5_f"
            :disabled="inputDisabled"
          >
            F、难以从外部渠道融资（包括银行和民间融资）
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers5.q5_g"
            :disabled="inputDisabled"
          >
            G、产品销售渠道不畅，产成品和应收货款占用上升
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers5.q5_h"
            :disabled="inputDisabled"
          >
            H、企业管理不善，效益不好，资金周转不灵
          </van-checkbox>
        </div>
      </div>
      <div class="question-item" v-if="answers4.q4 !== 'F'">
        <div class="question-item-title">
          <span class="question-index">06.</span
          ><span class="question-tip">【多选】</span>企业目前融资的主要形式:
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers6.q6_a"
            :disabled="inputDisabled"
          >
            A、银行贷款
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers6.q6_b"
            :disabled="inputDisabled"
          >
            B、票据
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers6.q6_c"
            :disabled="inputDisabled"
          >
            C、股权融资
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers6.q6_d"
            :disabled="inputDisabled"
          >
            D、债权融资
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers6.q6_e"
            :disabled="inputDisabled"
          >
            E、挂牌上市
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers6.q6_f"
            :disabled="inputDisabled"
          >
            F、内部集资
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers6.q6_g"
            :disabled="inputDisabled"
          >
            G、民间借贷
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers6.q6_h"
            :disabled="inputDisabled"
          >
            H、其他
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers6.q6_i"
            :disabled="inputDisabled"
          >
            I、目前无融资
          </van-checkbox>
        </div>
      </div>
      <div class="question-item" v-if="answers4.q4 !== 'F'">
        <div class="question-item-title">
          <span class="question-index">07.</span
          ><span class="question-tip">【多选】</span
          >企业的贷款资金主要用于以下哪些方面:
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers7.q7_a"
            :disabled="inputDisabled"
          >
            A、扩大生产规模
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers7.q7_b"
            :disabled="inputDisabled"
          >
            B、技术研发改造
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers7.q7_c"
            :disabled="inputDisabled"
          >
            C、解决流动资金不足
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers7.q7_d"
            :disabled="inputDisabled"
          >
            D、归还拖欠货款
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers7.q7_e"
            :disabled="inputDisabled"
          >
            E、进出口资金需要
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers7.q7_f"
            :disabled="inputDisabled"
          >
            F、营销推广
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers7.q7_g"
            :disabled="inputDisabled"
          >
            G、其他
          </van-checkbox>
        </div>
      </div>
      <div class="question-item" v-if="answers4.q4 !== 'F'">
        <div class="question-item-title">
          <span class="question-index">08.</span
          ><span class="question-tip">【单选】</span>企业可提供的融资担保方式:
        </div>
        <van-radio-group v-model="answers8.q8">
          <div class="question-ans">
            <van-radio icon-size="16px" name="A" :disabled="inputDisabled"
              >A、信用贷款</van-radio
            >
          </div>
          <div class="question-ans">
            <van-radio icon-size="16px" name="B" :disabled="inputDisabled"
              >B、固定资产(房产、车辆、设备等)抵押</van-radio
            >
          </div>
          <div class="question-ans">
            <van-radio icon-size="16px" name="C" :disabled="inputDisabled"
              >C、知识产权质押</van-radio
            >
          </div>
          <div class="question-ans">
            <van-radio icon-size="16px" name="D" :disabled="inputDisabled"
              >D、其他资产质押</van-radio
            >
          </div>
          <div class="question-ans">
            <van-radio icon-size="16px" name="E" :disabled="inputDisabled"
              >E、担保公司担保</van-radio
            >
          </div>
          <div class="question-ans">
            <van-radio icon-size="16px" name="F" :disabled="inputDisabled"
              >F、其他第三方担保</van-radio
            >
          </div>
        </van-radio-group>
      </div>
      <div class="question-item">
        <div class="question-item-title">
          <span>09.</span
          ><span class="question-tip">【选填】</span
          >企业对融资方面是否还有其他诉求或建议，如有请在下方填写:
        </div>
        <textarea
          rows="6"
          cols="30"
          v-model="answers9.q9"
          :readonly="inputDisabled"
        >
        </textarea>
      </div>
      <div class="question-item">
        <div class="question-item-title">
          <span class="question-index">10.</span
          ><span class="question-tip">【选择】</span
          >企业对此次客户经理走访情况进行打分评价:
        </div>
        <div class="rate-pf">
          <van-rate
            v-model="answers10.q10"
            :size="40"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
            :readonly="inputDisabled"
          />
        </div>
      </div>
      <div style="height: 100px"></div>
      <div class="submit-btn" v-if="!type">
        <div class="submit-bo" @click="goSub">提交</div>
      </div>
    </div>
  </Page>
</template>

<script>
import {
  insertVisitCropQuestion,
  getQuestionByrzId,
  getVisitCropQuestionByRzId
} from "@/interfaces/questionnaire";
export default {
  name: "visitForm",
  components: {},
  data() {
    return {
      myId:'',
      corpName: "",
      shortName: "",
      corpCredit: "",
      inputDisabled: false,
      // 问卷的答案
      answers1: {
        q1: "",
      },
      answers2: {
        q2: "",
      },
      answers3: {
        q3: "",
      },
      answers4: {
        q4: "",
      },
      answers5: {
        q5_a: "",
        q5_b: "",
        q5_c: "",
        q5_d: "",
        q5_e: "",
        q5_f: "",
        q5_g: "",
        q5_h: "",
      },
      answers6: {
        q6_a: "",
        q6_b: "",
        q6_c: "",
        q6_d: "",
        q6_e: "",
        q6_f: "",
        q6_g: "",
        q6_h: "",
        q6_i: "",
      },
      answers7: {
        q7_a: "",
        q7_b: "",
        q7_c: "",
        q7_d: "",
        q7_e: "",
        q7_f: "",
        q7_g: "",
      },
      answers8: {
        q8: "",
      },
      answers9: {
        q9: "",
      },
      answers10: {
        q10: 0,
      },
      type: "",
    };
  },
  created() {
    this.getDetails();
  },
  methods: {
    async getDetails() {
      this.type = this.getUrlParam("type") || "";
      this.corpName = decodeURIComponent(this.getUrlParam("corpName") || "");
      this.shortName = decodeURIComponent(this.getUrlParam("shortName") || "");
      this.corpCredit = this.getUrlParam("corpCredit") || "";
      this.userId = this.getUrlParam("userId") || "";
      this.myId = this.getUrlParam("myId") || "";
      if (this.type == "1") {
        console.log("111");

        this.inputDisabled = true;
        const params = {
          //   rzId: this.getUrlParam("id") || "",
          rzId: this.myId || "",
        };
        console.log(this.corpCredit, "paramsparams");
        console.log(this.myId, "myIdmyIdmyId");
        const res = await getVisitCropQuestionByRzId(params);
        console.log(res, "res");
        // 数据反显
        Object.keys(this.answers1).forEach((pre) => {
          this.answers1[pre] = res.data[pre];
        });
        Object.keys(this.answers2).forEach((pre) => {
          this.answers2[pre] = res.data[pre];
        });
        Object.keys(this.answers3).forEach((pre) => {
          this.answers3[pre] = res.data[pre];
        });
        Object.keys(this.answers4).forEach((pre) => {
          this.answers4[pre] = res.data[pre];
        });
        Object.keys(this.answers5).forEach((pre) => {
          this.answers5[pre] = res.data[pre] === "true" ? true : false;
        });
        Object.keys(this.answers6).forEach((pre) => {
          this.answers6[pre] = res.data[pre] === "true" ? true : false;
        });
        Object.keys(this.answers7).forEach((pre) => {
          this.answers7[pre] = res.data[pre] === "true" ? true : false;
        });
        Object.keys(this.answers8).forEach((pre) => {
          this.answers8[pre] = res.data[pre];
        });
        Object.keys(this.answers9).forEach((pre) => {
          this.answers9[pre] = res.data[pre];
        });
        Object.keys(this.answers10).forEach((pre) => {
          this.answers10[pre] = res.data[pre];
        });
        // Object.keys(this.answers_xt).forEach((pre) => {
        //   this.answers_xt[pre] = res.data[pre];
        // });
      } else {
        console.log("2222");
        this.inputDisabled = false;
      }
    },
    verify() {
      if (this.answers4.q4 === "F") {
        if (
          !Object.values(this.answers1).some((val) => val) ||
          !Object.values(this.answers2).some((val) => val) ||
          !Object.values(this.answers4).some((val) => val) ||
          !Object.values(this.answers10).some((val) => val)
        ) {
          return true;
        } else {
          return false;
        }
      } else {
        if (
          !Object.values(this.answers1).some((val) => val) ||
          !Object.values(this.answers2).some((val) => val) ||
          !Object.values(this.answers4).some((val) => val) ||
          !Object.values(this.answers5).some((val) => val) ||
          !Object.values(this.answers6).some((val) => val) ||
          !Object.values(this.answers7).some((val) => val) ||
          !Object.values(this.answers8).some((val) => val) ||
          !Object.values(this.answers10).some((val) => val)
        ) {
          return true;
        } else {
          return false;
        }
      }
    },
    async goSub() {
      if (this.verify()) {
        this.$toast("请填写问卷后提交");
      } else {
        // 如果多选为false改为‘’
        //   this.answers5.q5_a=this.answers5.q5_a==true?this.answers5.q5_a:''
        //   this.answers5.q5_b=this.answers5.q5_b==true?this.answers5.q5_b:''
        //   this.answers5.q5_c=this.answers5.q5_c==true?this.answers5.q5_c:''
        //   this.answers5.q5_d=this.answers5.q5_d==true?this.answers5.q5_d:''
        //   this.answers5.q5_e=this.answers5.q5_e==true?this.answers5.q5_e:''
        //   this.answers5.q5_f=this.answers5.q5_f==true?this.answers5.q5_f:''
        //   this.answers5.q5_g=this.answers5.q5_g==true?this.answers5.q5_g:''
        //   this.answers5.q5_h=this.answers5.q5_h==true?this.answers5.q5_h:''
        //  //
        //   this.answers6.q6_a=this.answers6.q6_a==true?this.answers6.q6_a:''
        //   this.answers6.q6_b=this.answers6.q6_b==true?this.answers6.q6_b:''
        //   this.answers6.q6_c=this.answers6.q6_c==true?this.answers6.q6_c:''
        //   this.answers6.q6_d=this.answers6.q6_d==true?this.answers6.q6_d:''
        //   this.answers6.q6_e=this.answers6.q6_e==true?this.answers6.q6_e:''
        //   this.answers6.q6_f=this.answers6.q6_f==true?this.answers6.q6_f:''
        //   this.answers6.q6_g=this.answers6.q6_g==true?this.answers6.q6_g:''
        //   this.answers6.q6_h=this.answers6.q6_h==true?this.answers6.q6_h:''
        //   this.answers6.q6_i=this.answers6.q6_i==true?this.answers6.q6_i:''
        //  //
        //   this.answers7.q7_a=this.answers7.q7_a==true?this.answers7.q7_a:''
        //   this.answers7.q7_b=this.answers7.q7_b==true?this.answers7.q7_b:''
        //   this.answers7.q7_c=this.answers7.q7_c==true?this.answers7.q7_c:''
        //   this.answers7.q7_d=this.answers7.q7_d==true?this.answers7.q7_d:''
        //   this.answers7.q7_e=this.answers7.q7_e==true?this.answers7.q7_e:''
        //   this.answers7.q7_f=this.answers7.q7_f==true?this.answers7.q7_f:''
        //   this.answers7.q7_g=this.answers7.q7_g==true?this.answers7.q7_g:''
        // ===========================
        const qsInfo =
          this.answers4.q4 === "F"
            ? {
                ...this.answers1,
                ...this.answers2,
                ...this.answers3,
                q5_a: "",
                q5_b: "",
                q5_c: "",
                q5_d: "",
                q5_e: "",
                q5_f: "",
                q5_g: "",
                q5_h: "",
                q6_a: "",
                q6_b: "",
                q6_c: "",
                q6_d: "",
                q6_e: "",
                q6_f: "",
                q6_g: "",
                q6_h: "",
                q6_i: "",
                q7_a: "",
                q7_b: "",
                q7_c: "",
                q7_d: "",
                q7_e: "",
                q7_f: "",
                q7_g: "",
                q8: "",
                ...this.answers9,
                ...this.answers10,
              }
            : {
                ...this.answers1,
                ...this.answers2,
                ...this.answers3,
                ...this.answers4,
                ...this.answers5,
                ...this.answers6,
                ...this.answers7,
                ...this.answers8,
                ...this.answers9,
                ...this.answers10,
              };
        const params = {
          rzId: this.myId,
          qsName: "走访问卷II",
          userId: this.userId,
          qsInfo: qsInfo,
        };
        console.log(params, "params");
        const res = await insertVisitCropQuestion(params);
        console.log(res, "res");
        if (res.code == 200) {
          this.$toast.success("您的问卷已提交成功");
        } else {
          this.$toast("请勿重复提交");
        }
      }
    },
    getUrlParam(name) {
      const queryStr = String(window.location).split("?")[1] || "";
      name = encodeURIComponent(name);
      let arr = new RegExp("(^|&)" + name + "=([^&]*)(&|$)").exec(queryStr);
      if (arr) {
        return RegExp.$2;
      } else {
        return "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/demo/index.scss";
.visit-form {
  height: 100%;
  overflow-y: auto;
  background: #f6f6f6;
}
.question {
  width: 100vw;
  height: 268px;
  background-color: #e3eeff;
  position: relative;
  background-image: url("~img/questionnaire/bac-top.png");
  background-repeat: repeat-x;
  background-size: 100% auto;
  padding: 13px;
  padding-bottom: 50px;
  // overflow-y: auto;
}
.question-body-btn {
  margin: 40px;
  height: 79px;
  background: #4b91e7;
  border-radius: 3px;
  font-size: 16px;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.question-title {
  height: 89px;
  // border: 1px solid red;
  .visit-top-title1 {
    margin: 0px 0 0 8px;
    width: 119px;
    height: 28px;
  }
  .visit-top-title2 {
    margin: 6px 0 0 8px;
    font-size: 13px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #000000;
  }
}
.qs-company {
  margin-top: 0px;
  height: 73px;
  background-image: url("~img/questionnaire/bac-company.png");
  background-repeat: repeat-x;
  background-size: 100% auto;
  display: flex;
  align-items: center;
  padding-left: 15px;
  .oneline_left {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border-radius: 5px;
    background-color: #3282e4;
    font-size: 12px;
    // font-family: Source Han Sans SC;
    color: #ffffff;
    margin-right: 7px;
    p {
      margin: 2px;
      text-align: center;
    }
  }
  .title-com {
    font-size: 15px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #000000;
  }
  .title-cre {
    font-size: 12px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #5f6269;
  }
}

/* 问卷内容 */
.question-item {
  background: #ffffff;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.06);
  border-radius: 9px;
  padding: 18px;
  margin-top: 16px;
  /* flex-wrap: wrap; */
  .question-index {
    position: relative;
    &::before {
      content: "*";
      position: absolute;
      left: -8px;
      top: 2px;
      color: #e3705d;
    }
  }
  .question-tip {
    color: #186ff5;
  }
}
.question-item-title {
  /* height: 50px; */
  // display: flex;
  // align-items: center;
  // flex-wrap: wrap;
  font-size: 15px;
  font-family: Helvetica Neue;
  font-weight: 500;
  color: #000000;
}
.question-ans {
  font-size: 14px;
  font-weight: 400;
  color: #777777 !important;
  /* display: flex;
      flex-direction: column;
      justify-content: space-between; */
  margin-top: 14px;
  display: flex;
  align-items: center !important;
  /* border: 1px solid red; */
  /deep/.van-radio__label {
    color: #777777 !important;
  }
}

/deep/.van-checkbox__label {
  color: #777777 !important;
}
.question-num {
  width: 68px;
  height: 24px;
  background: #ffffff;
  border: 1px solid #e0e1e5 !important;
  border-radius: 2px;
  margin: 0 8px;
  font-size: 13px;
  font-weight: 400;
  padding: 0 8px;
}
.question-item-title1 {
  font-size: 15px;
  font-weight: 400;
  color: #2c2c2c;
  /* display: flex;
      align-items: center; */
  /* flex-wrap: wrap; */
}
.question-num1 {
  width: 50px;
  height: 20px;
  background: #ffffff;
  border: 1px solid #e0e1e5 !important;
  border-radius: 2px;
  margin: 0 8px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 400;
  color: #777777;
  padding: 0 8px;
  display: inline-table;
}
.question-item-title2 {
  margin-top: 10px;
  font-size: 12px;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  color: #777777;
}
.submit-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #f6f6f6;
  border-radius: 3px;
  font-size: 16px;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: center;
}
.submit-bo {
  background: #356ded;
  height: 44px;
  width: calc(100% - 40px);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.rate-pf {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}
input {
  margin-top: 10px;
  height: 35px;
  width: 100%;
  -webkit-appearance: none;
  border: 1px solid rgb(238, 232, 232);
  padding: 2px;
  padding-left: 10px;
}
textarea {
  margin-top: 10px;
  width: 100%;
  -webkit-appearance: none;
  border: 1px solid rgb(238, 232, 232);
  padding: 2px;
}
/deep/ .van-checkbox__icon .van-icon {
  border-radius: 4px;
}
/deep/ .van-radio__icon--round .van-icon {
  border-radius: 4px;
}
/deep/ .van-rate__item:not(:last-child) {
  padding-right: 15px;
}
</style>
